<template>
  <button :class="['m-button', type, size, round ? 'round' : '', block ? 'block' : '', disabled ? 'disabled' : '']" @click="handleClick"><slot /></button>
</template>

<script lang="ts" setup name="MButton">
type buttontypes = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
type buttonSize = 'small' | 'medium' | 'large'

interface buttonProps {
  type?: buttontypes // 状态
  size?: buttonSize
  disabled?: boolean // 是否禁用
  loadding?: boolean // 是否加载
  plain?: boolean // 是否空心
  round?: boolean //是否圆角
  block?: boolean // 是否块级元素
}
const props = withDefaults(defineProps<buttonProps>(), {
  type: 'primary',
  size: 'medium',
  disabled: () => false,
  loadding: () => false,
  plain: () => false,
  round: () => false,
  block: () => false
})

interface buttonEmits {
  (e: 'click', evt: MouseEvent): MouseEvent
}

const emit = defineEmits<buttonEmits>()

const handleClick = (evt: MouseEvent) => {
  if (props.disabled) return
  emit('click', evt)
}

// 当按钮为两个字是  中间加上空格
const slots = useSlots() as any
if (slots.default()[0].children.length === 2) {
  slots.default()[0].children = slots.default()[0].children[0] + '  ' + slots.default()[0].children[1]
}
</script>
